<script setup>
import { onMounted, ref } from 'vue'
import RechargeItem from '@/components/RechargeItem.vue'
import { reqGetRechargeList } from '@/api/recharge/index.js'
import {showToast} from "vant";

const rechargeList = ref([])
const loading = ref(false)
const page = ref(1)
const total = ref(0)
const refreshing = ref(false)

const onLoadMore = () => {
  getRechargeList()
}

onMounted(() => {
  refreshing.value = true
  getRechargeList()
})

const onRefresh = () => {
  page.value = 1
  total.value = 0
  getRechargeList()
}

const getRechargeList = async () => {
  try {
    const result = await reqGetRechargeList({
      page: page.value
    })
    if (result.code === 200) {
      if (page.value === 1) {
        rechargeList.value = result.data.data
      } else {
        rechargeList.value = [...rechargeList.value, ...result.data.data]
      }
      total.value = result.data.total
      page.value++
    }
  } catch (e) {
    showToast({type: 'fail', message: e.message})
  } finally {
    loading.value = false
    refreshing.value = false
  }
}
</script>

<template>
  <div class="recharge-container">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        class="user-list"
        v-model:loading="loading"
        :finished="page * 10 >= total"
        finished-text="没有更多了"
        @load="onLoadMore"
      >
        <RechargeItem
          v-for="recharge in rechargeList"
          :key="recharge.id"
          :recharge="recharge"
        />
      </van-list>
      <van-back-top bottom="10vh" />
    </van-pull-refresh>
  </div>
</template>

<style scoped></style>